<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../assets/js/vue.js"></script>
    <title>v-bind</title>
</head>

<!--
    本节大多数代码为自己编写，有以下注意点：
    1.写代码要看清，用到vue的地方要包含在写着id的块中
    2.要绑定的东西要在vue的data中说明清楚
-->
<body>
    <div id="app">
        <!--绑定style-->
        <img v-bind:src=imgSrc width="200px" :style="styleObj">
        <a v-bind:href=blbl style="text-align: center;display: block;">bilibili</a>
        <a :href=baidu style="text-align: center;display: block;">baidu</a>

        <!--绑定属性组-->
        <hr>
        <p :class="[classOne,classTwo]">绑定css属性</p>

        <!--通过判断绑定或者通过三元表达式判断-->
        <input type="radio" id="sex" value="handsome" v-model="sex">
        <span :class="{boyClass:sex=='handsome'}">you are a boy.</span><br>
        <input type="radio" id="sex" value="beautiful" v-model="sex">
        <span :class="{girlClass:sex=='beautiful'}">you are a girl.</span>

        <p :class="sex=='handsome'?boyClass:girlClass">you are {{sex}}</p>
    
    
    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                imgSrc:"../assets/QQ截图20230201213244.png",
                blbl:'https://www.bilibili.com/',
                baidu:'https://www.baidu.com',
                classOne:'classOne',
                classTwo:'classTwo',
                sex:'',
                isTrue:true,
                boyClass:'boyClass',
                girlClass:'girlClass',
                styleObj:{
                    display: 'block',
                    margin: 'auto'
                }
            },
            
        })
    </script>

    <style>
        .classOne{
            color: purple;
            text-align: center;
        }
        .classTwo{
            font-size: 150%;
        }
        .boyClass{
            color: blueviolet;
        }
        .girlClass{
            color: pink;
        }
        
    </style>
</body>
</html>